<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.代理模式 现实世界没有那么简单  面向对象编程
        // 媒婆对象 你找另一半
        // 本来可以直接把一张 大照片交给img显示就好了
        // 现实世界没有那么简单  面向对象编程
        var myImage =(function(){
            // 闭包
            var imgNode = document.createElement('img');
            document.body.appendChild(imgNode);
            return {
                setSrc:function(src){
                    imgNode.src=src;
                }
            }
        })()
        var proxyImage =(function(){
            // 闭包
            var img=new Image();//DOM 代理对象
            img.onload = function(){
                // 设置一下
                myImage.setSrc(this.src);
            }
            return {
                setSrc:function(src){
                    // 代理对象去做体力活，下载图片
                    myImage.setSrc('https://tse1-mm.cn.bing.net/th/id/R-C.479a9262b437124e7729dea65a1b38e6?rik=Y2J09kL92ceB4g&riu=http%3a%2f%2fpic12.nipic.com%2f20110209%2f2897814_144041193193_2.gif&ehk=FdeIzybxoswa1K6DIrYvHhc39cCof7VwPzjAgmFSu48%3d&risl=&pid=ImgRaw&r=0');
                    img.src=src;  //  触发 网络进程
                }
            }
        })()
        // A 要显示图片， 让代理对象去找
        proxyImage.setSrc('https://tse1-mm.cn.bing.net/th/id/R-C.f8306ead580817b2446ae92c283aae9f?rik=Z%2bAhpJTyctb9Cg&riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2f86cfa59fbda38c4007b5723b1ecaeefa6e83c0db.png&ehk=XzUgCYImbXr5gFwOhKEXbbDNfX%2f1ehP6%2bFvViqSAYOw%3d&risl=&pid=ImgRaw&r=0');
        // 代理对象去执行
    </script>
</body>
</html>